<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		.box1{
			background: skyblue;
		}
		.box2{
			color: hotpink;
		}
		.main{
			font-size: 30px;
		}
	</style>
</head>
<body>
	<ul>
		<li>李锐锋和文帝中门对狙</li>
		<li>李锐锋打篮球</li>
		<li>李锐锋过马路</li>
		<li>李锐锋骑自行车</li>
		<li>李锐锋碰瓷老太太</li>
		<li aaa="456">老师decoration写十遍</li>
	</ul>


	<div class="main">frist</div>
	<div>second</div>
	<div>third</div>
	<button>添加box1</button>
	<button>移除box1</button>
	<button>添加box2</button>
	<button>切换类</button>
	<button>判断类</button>

	<script type="text/javascript" src="../jquery-3.2.1.js"></script>
	<script type="text/javascript">
		// css
		// 一条一条加
		$('li').css("background", "pink")
		.css("color", "yellow")

		// 多条加
		$("li").css({
			"list-style": "none",
			"font-size": "30px"
		})

		// class操作=================
		$("button").eq(0).click(() => {
			// 添加类名 addClass 会保留原来的类名
			$("div").addClass("box1")
		})

		$("button").eq(1).click(() => {
			// 移除类名 removeClass 
			$("div").removeClass("box1")
		})

		$("button").eq(2).click(() => {
			// 添加类名 addClass 会保留原来的类名
			$("div").addClass("box2")
		})

		$("button").eq(3).click(() => {
			// 切换类名 toggleClass 判断有没有这个类, 有就移除，没有就添加
			$("div").toggleClass("box1 box2")
		})

		$("button").eq(4).click(() => {
			// 判断类名 hasClass 返回true/false
			console.log($("div").hasClass("box1 box2"))
		})
	</script>
</body>
</html>